<template>
  <view class="member">
    <view class="title">申请签约</view>
    <view class="form">
      <u--form labelPosition="top" labelWidth="200rpx" :model="form" ref="uForm" :rules="rules">
        <u-form-item required label="联系人" prop="contact" borderBottom>
          <u--input placeholder="请输入" v-model="form.contact" border="none"></u--input>
        </u-form-item>
        <u-form-item required label="联系方式" prop="contactPhone" borderBottom>
          <u--input placeholder="请输入" v-model="form.contactPhone" border="none"></u--input>
        </u-form-item>
        <u-form-item required label="单位" prop="deptId" borderBottom>
          <LSelect dataKey="deptName" dataValue="deptId" v-model="form.deptId" border="none" :localdata="deptTree">
          </LSelect>
        </u-form-item>
        <u-form-item label="备注信息" borderBottom>
          <u--textarea v-model="form.remark" placeholder="填写详细街镇信息。例：昌平区城北街道。" border="none"></u--textarea>
        </u-form-item>
      </u--form>
    </view>
    <view class="submit flex-c" @click="submit">确认提交</view>
  </view>
</template>

<script>
import Upload from "@/components/Upload";
import { getToken } from "@/utils/auth";
import LSelect from "@/components/LSelect";
import { applyToRecycler, applySign, selectUnitList,updateApplication } from "@/api";
export default {
  components: {
    Upload,
    LSelect
  },
  data() {
    return {
      form: {
        contact: null,
        contactPhone: null,
        remark: null,
		deptId:null,
      },
      deptTree: [],
      rules: {
        contact: [
          {
            type: 'string',
            required: true,
            message: "请输入联系人",
            trigger: ["blur"],
          },
          { pattern: /^[\u4e00-\u9fa5]+$/, message: '姓名必须为中文', trigger: 'blur' }
        ],
        deptId: [
          {
            type: 'string',
            required: true,
            message: "请选择部门",
            trigger: ["blur"],
          },
        ],
        contactPhone: [
          {
            required: true,
            message: "请输入联系方式",
            trigger: ['change', 'blur'],
          },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ]


      },
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  onLoad(options) {
	// console.log('小程序扫码进入deptId',options.deptId);
	if (options.deptId) {
		let deptId = decodeURIComponent(options.deptId);
		this.form.deptId = deptId
	}
	// 申请记录带参数重新申请
  	console.log(JSON.parse(options.data));
	if(options.data){
		this.form = JSON.parse(options.data)
	}
	
  },
  onShow() {
    if (getToken()) {
      this.$store.dispatch("userInfo");
    }
    let userInfo = wx.getStorageSync('userInfo')
    if (userInfo.phonenumber) {
      this.form.contactPhone = userInfo.phonenumber
    }
    this.getUnitList()
  },
  methods: {
    onchange(val) {
      console.log(val)
    },
    getUnitList() {
      selectUnitList().then(res => {
        // console.log(res)
        this.deptTree = res.data
      })
    },
    submit() {
      console.log(this.userInfo.phonenumber);
      this.$refs.uForm.validate().then((res) => {
        if (this.form.contactPhone != this.userInfo.phonenumber) {
          this.$modal("当前手机号不是登录手机号，如用此手机号签约，需用此手机号登录。", () => {
            this.applySign()
          });
        } else {
          this.applySign()
        }

      });
    },
    applySign() {
		if(this.form.id){
			this.form.status = '0'
			// 修改
			updateApplication(this.form).then((res) => {
			  this.$toast("提交成功");
			  this.$route({
				type: "back",
				isDelay: true,
			  });
			});
		}else{
			applySign({
			  openid: this.userInfo.openid,
			  isSign:0,
			  // isSign:this.userInfo.signStatus,
			  ...this.form,
			}).then((res) => {
			  this.$toast("提交成功");
			  this.$route({
				type: "back",
				isDelay: true,
			  });
			});
		}
    }

  },
};
</script>

<style lang="less" scoped>
::v-deep .uni-select__input-text {
  text-align: left
}

.member {
  background-image: url("@/static/recovery-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 30rpx;
  height: 100vh;

  .active {
    background: #f7f7f7;
    border: 2rpx solid #138e57;
    color: #138e57;
  }

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 40rpx;
    color: #000000;
    padding: 48rpx 0 26rpx 0;
    text-align: center;
  }

  .form {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 0 30rpx;

    .six {
      view {
        padding: 12rpx 60rpx;
        background: #f7f7f7;
        border-radius: 200rpx;
        margin: 0 12rpx;
      }
    }
  }

  .submit {
    background: linear-gradient(83deg, #48b453 0%, #2c9f79 100%);
    border-radius: 200rpx;
    font-size: 32rpx;
    color: #ffffff;
    padding: 26rpx;
    margin: 60rpx 40rpx 0 40rpx;
  }
}
</style>
